<template>
  <div>
    <van-tabs @click="onClick" v-model="activeName">
      <van-tab
        :name="v.id"
        v-for="v in categoryList"
        :title="v.name"
        :key="v.id"
      >
        <div class="top">
          <h2>{{ v.name }}</h2>
          <p>{{ v.front_name }}</p>
        </div>
        <ul class="bigUl2">
          <li v-for="index in goods" :key="index.id" @click="$router.push('/details/'+index.id)">
            <img :src="index.list_pic_url" alt="" width="100%" />
            <h4>{{ index.name }}</h4>
            <p>{{ index.retail_price | keepTwo }}</p>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import { GetCate, GetGoodsLists } from "@/request/api";

export default {
  data() {
    return {
      categoryList: "",
      goods: "",
      activeName: "",
      id: "",
    };
  },
  components: {},
  methods: {
    onClick(name) {
      // console.log(name);
      GetGoodsLists({ categoryId: name }).then((res) => {
        this.goods = res.data.goodsList;
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    // console.log(this.id);
    // this.activeName=id

    GetCate().then((res) => {
      // console.log(res);
      this.categoryList = res.data.categoryList;
    });
    GetGoodsLists({ categoryId: this.id }).then((res) => {
      // console.log(res);
      this.goods = res.data.goodsList;
    });
  },
  filters: {
    keepTwo(value) {
      // 截取当前数据到小数点后三位
      const tempVal = Number(value).toFixed(3);
      if (tempVal === "NaN") {
        return "0.00";
      }
      const realVal = tempVal.substring(0, tempVal.length - 1);
      return "¥ " + realVal + " 元";
    },
  },
};
</script>


<style lang="less" scoped>
.bigUl2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // padding: 0.1rem;
  box-sizing: border-box;
  // width: 100%;
  overflow: hidden;
  background-color: #fff;
}
.bigUl2 li {
  width: 49%;
  padding-bottom: 0.2rem;
}
.bigUl2 li h4 {
  text-align: center;
  // margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 0.14rem;
}
.bigUl2 li p {
  text-align: center;
  font-size: 0.14rem;
  color: #8b0000;
}
.top {
  width: 100%;
  background-color: #efefef;
  h2 {
    height: 0.5rem;
    width: 100%;
    font-size: 0.18rem;
    text-align: center;
    line-height: 0.5rem;
  }
  p {
    height: 0.3rem;
    width: 100%;
    font-size: 0.14rem;
    color: #666666;
    text-align: center;
    line-height: 0.3rem;
  }
}
</style>
